<template>
  <div id="app" ref="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  watch: {
    '$route.path'(newVal, oldVal) {
      // 动态监测宽度变化
      const appStyle = this.$refs.app.style;
      const appBgStyle = document.getElementById('appBg').style;
      if (/^\/login/.test(newVal)) {
        appStyle.paddingLeft = 0;
        appStyle.paddingRight = 0;
        appBgStyle.display = 'none';
      } else {
        this.onresize();
        appBgStyle.display = 'block';
      }
    }
  },
  mounted() {
    // console.warn(this.$utils);
    window.onresize = this.onresize;
    this.changeStyle(this.$refs.app);
  },
  methods: {
    onresize() {
      const appStyle = this.$refs.app.style;
      const wh = document.body.offsetWidth;
      const padding = (wh - 1280) > 0 ? (wh - 1280) / 2 : 5;
      appStyle.paddingLeft = `${padding > 50 ? 50 : padding}px`;
      appStyle.paddingRight = `${padding > 50 ? 50 : padding}px`;
    },
    changeStyle(app) {
      const wh = window.outerWidth;
      if (wh >= 1680) {
        return;
      }
      let scaleType = wh >= 1440 ? 1 : 0;
      scaleType = wh < 1440 && wh > 1366 ? 2 : 0;
      if (scaleType === 1) {
        app.style.transform = 'scale(0.9)';
        app.style.transformOrigin = '0px 0px';
        app.style.width = '111%';
        app.style.height = '111%';
      // eslint-disable-next-line no-constant-condition
      } else if (scaleType === 2) {
        app.style.transform = 'scale(0.8)';
        app.style.transformOrigin = '0px 0px';
        app.style.width = '125%';
        app.style.height = '125%';
      } else {
        app.style.transform = 'scale(0.7)';
        app.style.transformOrigin = '0px 0px';
        app.style.width = '143%';
        app.style.height = '143%';
      }
    //   transform: scale(0.8);
    // transform-origin: 0px 0px;
    // width: 125%;
    // height: 122%;"
    }
  }
};
</script>
<style lang="scss" scoped>
#app{
  .header-bg {
    width: 100vw;
    height: 213px;
    position: absolute;
    top: 0;
    left: 0;
    background: #307ec3;
  }
}
</style>
